<pngx-page-header
  title="Logs"
  i18n-title
  info="Review the log files for the application and for email checking."
  i18n-info>
  <div class="input-group input-group-sm align-items-center">
    <div class="input-group input-group-sm me-3">
      <span class="input-group-text text-muted" i18n>Show</span>
      <input
        class="form-control"
        type="number"
        min="100"
        step="100"
        [(ngModel)]="limit"
        (ngModelChange)="onLimitChange($event)"
        style="width: 100px;">
      <span class="input-group-text text-muted" i18n>lines</span>
    </div>
    <div class="form-check form-switch mt-1">
      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
    </div>
  </div>
</pngx-page-header>

<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
  @for (logFile of logFiles; track logFile) {
    <li [ngbNavItem]="logFile">
      <a ngbNavLink>
        {{logFile}}.log
      </a>
    </li>
  }
  @if (loading || !logFiles.length) {
    <div class="ps-2 d-flex align-items-center">
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      @if (!logFiles.length) {
        <ng-container i18n>Loading...</ng-container>
      }
    </div>
  }
</ul>

<div #logContainer class="bg-dark text-light font-monospace log-container p-3" (scroll)="onScroll()">
  @if (loading && !logFiles.length) {
    <div>
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      <ng-container i18n>Loading...</ng-container>
    </div>
  } @else {
    @for (log of logs; track log) {
      <p class="m-0 p-0" [ngClass]="'log-entry-' + log.level">{{log.message}}</p>
    }
  }
</div>
<button
  type="button"
  class="btn btn-sm btn-secondary jump-to-bottom position-fixed bottom-0 end-0 m-5"
  [class.visible]="showJumpToBottom"
  (click)="scrollToBottom()"
>
  ↓ <span i18n>Jump to bottom</span>
</button>
